// qiankun
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
import store from "./store";
import NProgress from "nprogress";

import "@/utils/directive"; //自定义指令
import "@/assets/style/reset.css"; //重置样式
import "@/assets/style/common.scss"; //全局样式
// import "element-ui/lib/theme-chalk/index.css"; // element样式 cdn不用引入
import "@/assets/style/element-variables.scss"; //主题修改  使用了自定义主题，不用再单独引入element样式
// import 'normalize.css/normalize.css'
import "nprogress/nprogress.css";
import "@/utils/resize";

Vue.config.productionTip = false;

/* element 全部映入 */
import ElementUI from "element-ui";
Vue.use(ElementUI, {
	size: "small",
	zIndex: 3000,
});

/* element 按需映入  */
// import './plugins/element'
// Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };

/* 二次确认组件 */
import myConfirm from "./components/confirm/index.js";
Vue.prototype.$confirm = myConfirm;

/* 自定义插件*/
import toastRegistry from "./components/test/toast.js";
Vue.use(toastRegistry);

/* 图片资源懒加载 */
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload);

/* VueWorker */
import VueWorker from "vue-worker";
Vue.use(VueWorker);

let instance = null;
let router = null;
function render(props = {}) {
	const { container } = props;
	router = new VueRouter({
		// base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',
		base: "/vue-cli3",
		mode: "history",
		routes,
	});

	// 进度条配置项这样写
	NProgress.configure({
		showSpinner: true,
	});
	// 路由跳转前钩子函数中 - 执行进度条开始加载
	router.beforeEach((to, from, next) => {
		NProgress.start();
		next();
	});
	// 路由跳转后钩子函数中 - 执行进度条加载结束
	router.afterEach(() => {
		NProgress.done();
	});
	instance = new Vue({
		router,
		store,
		render: (h) => h(App),
	}).$mount(container ? container.querySelector("#app") : "#app");
}

// webpack打包公共文件路径
if (window.__POWERED_BY_QIANKUN__) {
	// eslint-disable-next-line no-undef
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// 独立运行
if (!window.__POWERED_BY_QIANKUN__) {
	render();
}

// 生命周期 中获取通信方法
export async function bootstrap() {
	console.log("[vue] vue app bootstraped");
}

export async function mount(props) {
	console.log("[vue] props from main framework", props);
	// storeTest(props);

	props.onGlobalStateChange((state, prev) => {
		// state: 变更后的状态; prev 变更前的状态
		console.log(state, prev);
	});
	props.setGlobalState({ name: "hong", age: 10 }); //按一级属性设置全局状态，微应用中只能修改已存在的一级属性

	render(props);
}

export async function unmount() {
	instance.$destroy();
	instance.$el.innerHTML = "";
	instance = null;
	router = null;
}
